<template>
    <div class="myCollection">
        <div class="header">
            <span @click="GoBack()"><van-icon name="arrow-left" /></span>
            <p>我的收藏</p>
            <span></span>
        </div>
        <section>
            <dl v-for="(item,index) in collectionList" v-if="bool">
                <dt @click="jumpToCommodity(item.gid)">
                    <img v-lazy="item.image" alt=""/>
                </dt>
                <dd>
                    <p>{{item.title}}</p>
                    <p class="price">¥{{item.price}}</p>
                    <p>
                        <button>购买</button>
                        <button @click="deleteGood(item.fid)">删除</button>
                    </p>
                </dd>
            </dl>
            <p v-else>您还没有收藏东西</p>
        </section>
    </div>
</template>
<script>
    import {getCollection,delCollection} from "../../api/list/list";

    export default {
        name:'myCollection',
        data(){
            return{
                collectionList:[],
                bool:true
            }
        },
        created() {
            this.initCollection()
        },
        methods:{
            initCollection(){
                const params = {
                    uid : JSON.parse(localStorage.getItem('userData')).uid,
                    token:'1ec949a15fb709370f'
                }
                getCollection(params).then((res)=>{
                    console.log(res)
                    if(res.data.code == 200){
                        this.collectionList = res.data.data
                    }else{
                        this.bool = false
                    }

                })
            },
            GoBack(){
                history.go(-1)
            },
            jumpToCommodity(id){
                console.log(id)
                this.$router.push({path:'/commodity/index',query:{gid:id}})
            },
            deleteGood(item){
                const params = {
                    uid : JSON.parse(localStorage.getItem('userData')).uid,
                    fid : item,
                    token : '1ec949a15fb709370f'
                }
                delCollection(params).then((res)=>{
                    console.log(res)
                    if(res.data.code == 200){
                        this.$toast.success('删除成功');
                        this.initCollection()
                    }else{
                        this.$toast.fail('删除失败');
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .myCollection{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .header{
            width: 100%;
            height: 1rem;
            display: flex;
            border-bottom: 1px solid #efefef;
            span{
                width: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.4rem;
            }
            p{
                flex: 1;
                text-align: center;
                line-height: 1rem;
                font-size: 0.32rem;
            }
        }
        section{
            flex: 1;
            overflow: auto;
            background: #eaeaea;
            dl:nth-child(even){
                margin-left: 0.2rem;
            }
            dl {
                width: 48%;
                float: left;
                background: white;
                padding: 0.1rem;
                box-sizing: border-box;
                margin-top: 0.2rem;
                margin-bottom: 0.1rem;
                dt{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 100%;
                        height: 3rem;
                        display: block;
                    }
                }
                dd{
                    width: 97%;
                    text-align: left;
                    p{
                        height: 0.8rem;
                        display: -webkit-box;
                        text-align: center;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        margin: 0 auto;
                        line-height: 0.4rem;
                        text-align: left;
                    }
                    .price{
                        text-align: left;
                        color: red;
                        height: 0.3rem;
                    }
                    p:last-child{
                        width: 100%;
                        margin-top: 0.2rem;
                        display: flex;
                        justify-content: space-between;
                        button{
                            border: 1px solid red;
                            border-radius: 0.1rem;
                            color: red;
                            width: 1rem;
                            background: white;
                            height: 0.5rem;
                        }
                    }
                }
            }
        }
    }
</style>